/**
 * @ignore
 * color button.
 * @author yiminghe@gmail.com
 */
KISSY.add(function (S, require) {
    var Editor = require('editor');
    var Button = require('../button');
    var Overlay4E = require('../overlay');
    var DialogLoader = require('../dialog-loader');

    var Node = S.Node;

    var COLORS = [
        ['000', '444', '666', '999', 'CCC', 'EEE', 'F3F3F3', 'FFF'],
        ['F00', 'F90', 'FF0', '0F0', '0FF', '00F', '90F', 'F0F'],
        [
            'F4CC' + 'CC', 'FCE5CD', 'FFF2CC', 'D9EAD3', 'D0E0E3', 'CFE2F3', 'D9D2E9', 'EAD1DC',
            'EA9999', 'F9CB9C', 'FFE599', 'B6D7A8', 'A2C4C9', '9FC5E8', 'B4A7D6', 'D5A6BD',
            'E06666', 'F6B26B', 'FFD966', '93C47D', '76A5AF', '6FA8DC', '8E7CC3', 'C27BAD',
            'CC0000', 'E69138', 'F1C232', '6AA84F', '45818E', '3D85C6', '674EA7', 'A64D79',
            '990000', 'B45F06', 'BF9000', '38761D', '134F5C', '0B5394', '351C75', '741B47',
            '660000', '783F04', '7F6000', '274E13', '0C343D', '073763', '20124D', '4C1130'
        ]
    ], html;


    function initHTML() {
        html = '<div class="{prefixCls}editor-color-panel">' +
            '<a class="{prefixCls}editor-color-remove" ' +
            'href="javascript:void(\'清除\');">' +
            '清除' +
            '</a>';
        for (var i = 0; i < 3; i++) {
            html += '<div class="{prefixCls}editor-color-palette"><table>';
            var c = COLORS[i], l = c.length / 8;
            for (var k = 0; k < l; k++) {
                html += '<tr>';
                for (var j = 0; j < 8; j++) {
                    var currentColor = '#' + (c[8 * k + j]);
                    html += '<td>';
                    html += '<a href="javascript:void(0);" ' +
                        'class="{prefixCls}editor-color-a" ' +
                        'style="background-color:'+ currentColor+ '"' +
                        '></a>';
                    html += '</td>';
                }
                html += '</tr>';
            }
            html += '</table></div>';
        }
        html += '' +
            '<div>' +
            '<a class="{prefixCls}editor-button {prefixCls}editor-color-others ks-inline-block">其他颜色</a>' +
            '</div>' +
            '</div>';
    }

    initHTML();

    var ColorButton = Button.extend({
        initializer: function () {
            var self = this;
            self.on('blur', function () {
                // make select color works
                setTimeout(function () {
                    if(self.colorWin){
                        self.colorWin.hide();
                    }
                }, 150);
            });
            self.on('click', function () {
                var checked = self.get('checked');
                if (checked) {
                    self._prepare();
                } else {
                    if(self.colorWin){
                        self.colorWin.hide();
                    }
                }
            });
        },

        _prepare: function () {
            var self = this,
                editor = self.get('editor'),
                prefixCls = editor.get('prefixCls'),
                colorPanel;

            self.colorWin = new Overlay4E({
                // TODO 变成了 -1??
                elAttrs: {
                    tabindex: 0
                },
                elCls: prefixCls + 'editor-popup',
                content: S.substitute(html, {
                    prefixCls: prefixCls
                }),
                width: 172,
                zIndex: Editor.baseZIndex(Editor.ZIndexManager.POPUP_MENU)
            }).render();

            var colorWin = self.colorWin;
            colorPanel = colorWin.get('contentEl');
            colorPanel.on('click', self._selectColor, self);
            colorWin.on('hide', function () {
                self.set('checked', false);
            });
            var others = colorPanel.one('.' + prefixCls + 'editor-color-others');
            others.on('click', function (ev) {
                ev.halt();
                colorWin.hide();
                DialogLoader.useDialog(editor, 'color', undefined, self);
            });
            self._prepare = self._show;
            self._show();
        },

        _show: function () {
            var self = this,
                el = self.get('el'),
                colorWin = self.colorWin;
            colorWin.set('align', {
                node: el,
                points: ['bl', 'tl'],
                offset: [0, 2],
                overflow: {
                    adjustX: 1,
                    adjustY: 1
                }
            });
            colorWin.show();
        },

        _selectColor: function (ev) {
            ev.halt();
            var self = this,
                editor = self.get('editor'),
                prefixCls = editor.get('prefixCls'),
                t = new Node(ev.target);
            if (t.hasClass(prefixCls + 'editor-color-a')) {
                self.fire('selectColor', {
                    color: t.style('background-color')
                });
            } else if (t.hasClass(prefixCls + 'editor-color-remove')) {
                self.fire('selectColor', {
                    color: null
                });
            }
        },

        destructor: function () {
            var self = this;
            if (self.colorWin) {
                self.colorWin.destroy();
            }
        }
    }, {
        ATTRS: {
            checkable: {
                value: true
            },
            mode: {
                value: Editor.Mode.WYSIWYG_MODE
            }
        }
    });

    var tpl = '<div class="{icon}"></div>' +
        '<div style="background-color:{defaultColor}"' +
        ' class="{indicator}"></div>';

    function runCmd(editor, cmdType, color) {
        setTimeout(function () {
            editor.execCommand(cmdType, color);
        }, 0);
    }

    ColorButton.init = function (editor, cfg) {
        var prefix = editor.get('prefixCls') + 'editor-toolbar-',
            cmdType = cfg.cmdType,
            defaultColor = cfg.defaultColor,
            tooltip = cfg.tooltip;

        var button = editor.addButton(cmdType, {
            elCls: cmdType + 'Btn',
            content: S.substitute(tpl, {
                defaultColor: defaultColor,
                icon: prefix + 'item ' + prefix + cmdType,
                indicator: prefix + 'color-indicator'
            }),
            mode: Editor.Mode.WYSIWYG_MODE,
            tooltip: '设置' + tooltip
        });

        var arrow = editor.addButton(cmdType + 'Arrow', {
            tooltip: '选择并设置' + tooltip,
            elCls: cmdType + 'ArrowBtn'
        }, ColorButton);

        var indicator = button.get('el').one('.' + prefix + 'color-indicator');

        arrow.on('selectColor', function (e) {
            indicator.css('background-color', e.color || defaultColor);
            runCmd(editor, cmdType, e.color);
        });

        button.on('click', function () {
            runCmd(editor, cmdType, indicator.style('background-color'));
        });
    };

    return ColorButton;
});